<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06_事件监听</title>
</head>
<body>
    <button onclick="alert('杨硕买到票了!')">按钮1</button>
    <button id="btn">按钮2</button>
    <br>
    <span>震惊：杨硕居然抢到两天后火车票了</span>
    <div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad at debitis est et eveniet itaque iusto,
            molestiae non odio, perferendis quo recusandae suscipit tempora. Dolor doloribus excepturi inventore odio
            sapiente?
        </div>
        <div>Aut culpa ea fuga fugiat, in natus nemo nobis suscipit. Accusamus ea harum laborum molestias nam nulla
            numquam quibusdam quo reiciendis repellat. Asperiores deserunt harum nam natus quam quo voluptatem?
        </div>
        <div>Aperiam consequatur corporis eaque eius, excepturi expedita fuga hic impedit libero, maxime non numquam
            obcaecati porro, quaerat quasi sapiente sunt suscipit tempore velit veniam! Blanditiis distinctio fugiat
            illo inventore ut.
        </div>
        <div>Atque cum neque reiciendis. Alias culpa debitis dignissimos eius excepturi maxime nihil quo recusandae
            repudiandae voluptate. Maiores, optio quos? Blanditiis debitis deserunt earum fugiat modi nisi sed sit
            veniam voluptatem.
        </div>
        <div>Accusamus animi consectetur dignissimos dolorem, earum, eius eligendi enim impedit labore laboriosam
            maiores modi nisi optio perferendis repellendus voluptate voluptates. Eaque et facere hic maiores
            repellendus sint sit tempora vero.
        </div>
        <div>Aut enim excepturi maxime molestias neque officia, optio quisquam saepe sit suscipit, tempora, unde veniam
            voluptas. Alias atque debitis, dolorem eaque eius eos inventore laborum odit possimus quo totam veniam?
        </div>
        <div>Accusantium dolore, doloremque dolores eveniet illum mollitia quasi quidem rem reprehenderit sit, unde
            voluptatibus voluptatum. Animi architecto autem expedita, facere in ipsum, nisi nostrum optio, quia ratione
            sit ut veritatis?
        </div>
        <div>Alias assumenda consectetur consequuntur dolores eaque ex in inventore laboriosam minima molestias mollitia
            nam officia officiis pariatur placeat possimus quia, quis, ratione reprehenderit saepe similique sit tempore
            totam vel veritatis?
        </div>
        <div>Accusantium ad alias aliquid asperiores aut consectetur deserunt, doloremque ducimus enim explicabo facere
            hic inventore ipsa labore minus neque odio officia quae quasi repudiandae sint sunt tempora, temporibus vel
            voluptatem!
        </div>
        <div>Amet aspernatur cum distinctio dolore ea earum, enim explicabo facere fuga in, inventore laboriosam
            laudantium modi nam nihil non nulla odit omnis possimus quia quos repellat saepe sed similique soluta?
        </div>
        <div>Corporis distinctio, ipsa ipsum labore mollitia nulla odio praesentium quod similique veritatis. Culpa
            quam, ut! Consequatur eaque ex fuga illum, ipsa ipsum iusto mollitia nesciunt officia, perferendis quae sunt
            tempora!
        </div>
        <div>Accusamus aliquid animi autem beatae consectetur culpa doloremque ea eaque id impedit itaque iusto
            necessitatibus neque numquam odio pariatur placeat porro, praesentium quasi quo reiciendis sapiente ut vel
            veritatis vero.
        </div>
        <div>Aliquid amet at dolor eos ex exercitationem ipsa officiis omnis quibusdam quidem. Animi dolore ex
            excepturi, expedita illum laudantium, necessitatibus numquam odio perspiciatis placeat quaerat, recusandae
            repellat repellendus veritatis voluptates.
        </div>
        <div>Ad at atque beatae blanditiis deleniti dolor enim illo inventore ipsam magnam nemo nesciunt perferendis,
            perspiciatis porro provident quasi quidem quo recusandae reiciendis, reprehenderit, rerum soluta temporibus
            tenetur unde vero?
        </div>
        <div>A aperiam aut blanditiis cum, eligendi enim facilis fugit laboriosam minima minus nam nulla, pariatur
            provident ratione reiciendis saepe vero? Cupiditate dicta, eaque exercitationem id nesciunt rem similique
            vel voluptates.
        </div>
        <div>Delectus, labore, natus. Amet assumenda culpa expedita fugit hic odio perspiciatis, ratione reiciendis
            vitae voluptate! Accusamus, dicta distinctio enim eveniet excepturi in incidunt, iste numquam quam quos
            saepe voluptas voluptatibus.
        </div>
        <div>Aliquid animi aperiam aspernatur deserunt dicta ea earum eum, explicabo illum, incidunt libero molestiae
            nam necessitatibus nobis placeat quaerat quia quod totam? A dolore porro quisquam sed ut velit voluptates!
        </div>
        <div>Alias, aliquid doloremque eius error eum incidunt laborum molestiae mollitia natus nostrum odit optio
            placeat praesentium soluta, unde! Cum distinctio eius libero magni molestiae. Alias commodi consequatur cum
            vero voluptatum.
        </div>
        <div>Aut dolorem eligendi maxime praesentium quod saepe sit vitae! Ducimus eum excepturi laboriosam minus quae
            similique totam! Fugiat iure laborum maiores officiis quae rem repellat ullam voluptas, voluptatem.
            Mollitia, provident.
        </div>
        <div>Alias, aperiam assumenda atque autem commodi deleniti dicta et eveniet fugiat id, illum laudantium maiores
            minus obcaecati odio perferendis quos ratione rem sapiente soluta ullam voluptas voluptatem? Deserunt,
            doloremque, nisi.
        </div>
        <div>Aliquam beatae delectus ipsa magnam maxime necessitatibus odit sint unde voluptas voluptates. Atque beatae
            ea error ex excepturi illum inventore molestiae obcaecati perspiciatis quo quos, similique tenetur unde
            veniam veritatis!
        </div>
        <div>A aperiam dicta dignissimos earum nisi provident quos recusandae saepe voluptatem voluptates? Commodi
            facilis laudantium odio, omnis optio porro saepe vitae. Alias cum esse est, id nostrum odio omnis sint!
        </div>
        <div>Neque, non, praesentium. Adipisci aliquam aperiam corporis cum dolore dolores eos illo impedit ipsum iste
            iusto labore maiores odio repellat repellendus sequi soluta, suscipit veniam. Consequuntur dicta dignissimos
            quae quo!
        </div>
        <div>Ab asperiores at autem consequatur deleniti dicta dolorem ducimus ea eaque, eligendi error esse eveniet
            ipsa molestiae nam nesciunt officiis quibusdam quisquam reprehenderit tempore velit vitae voluptates. Ad,
            sapiente, soluta?
        </div>
        <div>Alias amet aperiam architecto aspernatur ducimus eaque explicabo fuga in ipsa, magni minima mollitia quae
            reprehenderit sed unde veritatis voluptatem. Ducimus omnis repellendus veniam? Dolor, provident totam? Iste,
            nostrum vel!
        </div>
        <div>At deleniti fugiat id libero nam, obcaecati omnis. Aliquid, architecto asperiores atque consectetur dolores
            facere, magnam nesciunt nobis nostrum, officiis optio pariatur quisquam quod sit temporibus totam vero
            voluptas voluptatibus!
        </div>
        <div>Accusantium adipisci amet aspernatur consequatur debitis delectus dolor dolore eos eum explicabo facere
            illo, laudantium necessitatibus nihil nulla odio odit, perferendis placeat quas quidem ratione recusandae
            sint vel veritatis voluptatum?
        </div>
        <div>Accusantium aliquid atque beatae delectus dolor dolore dolorem dolorum eos error eum harum ipsam magnam,
            neque numquam odit perferendis perspiciatis quas quibusdam quisquam quos rem saepe sapiente sequi veritatis
            vero.
        </div>
        <div>Accusamus animi asperiores assumenda atque debitis delectus deserunt enim ex facere fugiat illum inventore
            ipsa iste iusto laborum maiores, maxime, minus nemo neque nostrum odit qui, similique sit tempora
            voluptates.
        </div>
        <div>Explicabo id praesentium quis quisquam quos vel? Ad amet aspernatur, consectetur dolores ea harum nisi non
            nulla numquam omnis optio quisquam repellat sapiente totam vel vero voluptatem. Animi, illo laboriosam!
        </div>
        <div>Dolor doloremque modi nam placeat sequi vel! At commodi consequatur dolores ex excepturi exercitationem
            illo ipsam labore magni odit perspiciatis provident, quaerat quis quod recusandae repudiandae sed tempore
            temporibus voluptas?
        </div>
        <div>Amet corporis dolore nam omnis pariatur possimus quas quos repellendus sapiente totam! Consequuntur dolores
            facilis fugiat fugit illum laudantium nesciunt numquam placeat provident quae quibusdam quidem sunt veniam
            voluptatem, voluptatibus.
        </div>
        <div>Aut consectetur delectus dicta labore, quaerat quasi quibusdam veniam. Accusamus ad aperiam assumenda
            blanditiis cumque dolore dolorem est excepturi, in ipsum officia pariatur placeat possimus quaerat quo sequi
            similique, tenetur.
        </div>
        <div>Aliquam commodi eaque qui quibusdam temporibus? Cum cumque dolorem eius eligendi libero minus modi quaerat
            sunt unde vero? A ab assumenda deleniti earum hic impedit in iusto nam, quidem voluptate.
        </div>
        <div>Architecto dolor iste laboriosam nemo perferendis possimus quae quasi quod tempora, voluptas. Aut,
            blanditiis, dicta ducimus est, et expedita explicabo ipsam iste iusto libero minima mollitia omnis quam
            recusandae repudiandae!
        </div>
        <div>Beatae et explicabo fugiat magni non recusandae rerum tempore unde! Ad aliquid amet atque commodi culpa
            fugiat in itaque laudantium minus, mollitia nulla possimus quasi quo quod tempore totam veniam.
        </div>
        <div>A adipisci aliquid aspernatur beatae deleniti eius eligendi enim expedita fugit mollitia natus nisi nobis
            numquam pariatur quaerat quasi qui quod sequi sint soluta tempora, vel vero voluptatem. Ducimus, hic.
        </div>
        <div>A ad commodi consequatur cumque dicta, dolorem doloremque illum, iusto mollitia neque nostrum praesentium,
            quod rem sit tenetur? Ab cumque dolor magni perspiciatis quibusdam repellat voluptates. Amet minus modi sit!
        </div>
        <div>A ad beatae deserunt, dolore eos facere impedit iusto laboriosam laudantium libero odit perferendis placeat
            totam ullam vel. Aut beatae cum iste nemo nesciunt placeat possimus recusandae saepe similique ut.
        </div>
        <div>Asperiores deleniti distinctio mollitia officia rem sed suscipit voluptate? Aliquam fugit incidunt
            molestiae nisi pariatur reiciendis veritatis? Adipisci alias consequuntur doloribus dolorum fuga incidunt
            laborum quaerat quo. Quia vitae, voluptatibus.
        </div>
        <div>Aliquid amet eos incidunt molestiae porro possimus soluta tempore temporibus. Eaque fugit impedit
            praesentium ullam. Aperiam blanditiis consequatur, corporis dignissimos dolor ex hic ipsa, nam numquam
            placeat soluta ut velit!
        </div>
        <div>Amet, aperiam asperiores atque blanditiis debitis dignissimos dolore eaque esse harum impedit maxime natus
            necessitatibus nemo nulla officia omnis quibusdam quo recusandae tempore ullam. Consequatur cupiditate earum
            qui similique tenetur.
        </div>
        <div>Ab aliquam asperiores corporis cumque dolore earum, fugit, impedit minus provident repellat, soluta
            suscipit voluptas! Asperiores, commodi cupiditate error esse hic libero nostrum perferendis placeat quod rem
            saepe, tempora, tenetur?
        </div>
        <div>Aspernatur dolorem, dolorum eos illo nemo possimus voluptas. Amet architecto autem doloremque dolorum ea
            error excepturi illum iusto labore maiores nesciunt nobis, odit pariatur perferendis, porro, quibusdam quis
            quos voluptate?
        </div>
        <div>Ab corporis cum cumque, delectus doloremque expedita facilis fugiat laboriosam mollitia, nemo quis
            repellat, sed vel voluptatem voluptatum! Iste numquam, rem! Consectetur exercitationem facere fugit ipsam
            iusto maxime quo, soluta.
        </div>
        <div>Ab adipisci cumque, facilis illo minima velit voluptate. Corporis deleniti, iure pariatur quae ratione unde
            ut? Alias architecto at labore molestiae mollitia nihil quasi veritatis! At quaerat rerum ut veritatis.
        </div>
        <div>Adipisci consequatur exercitationem laborum minima necessitatibus quas rem repudiandae totam veritatis
            voluptatem? Blanditiis excepturi expedita optio! Ab, nesciunt, quos. Accusamus cum delectus dolores eum
            explicabo ipsam laborum magnam perferendis voluptate.
        </div>
        <div>Aut culpa dicta doloribus eius enim, itaque magnam, natus nihil odio odit rerum sapiente sequi, velit
            veniam voluptatibus. Eius quis, quos. Ab ad impedit magnam omnis quibusdam quos ratione voluptate.
        </div>
        <div>A fuga id minus quae quo quos reprehenderit, suscipit. Accusantium amet eum, incidunt nesciunt placeat sunt
            unde vel! Blanditiis culpa doloribus eaque inventore ipsa odit porro provident, reiciendis repudiandae.
            Accusantium.
        </div>
        <div>Aliquam asperiores, culpa dolore doloribus esse ex iste magnam odit placeat quaerat quia quidem vel, veniam
            voluptas voluptatem? Aperiam atque cupiditate doloribus enim impedit ipsam neque nostrum perspiciatis quos
            sit.
        </div>
        <div>Cum harum quia reiciendis. Eligendi, laborum, quasi? Alias, aperiam cupiditate debitis deleniti distinctio
            dolor dolorem dolores ducimus ex iste nam neque, nihil nisi odio perspiciatis possimus ratione repellat
            ullam voluptas?
        </div>
        <div>Aliquid aspernatur assumenda atque excepturi possimus soluta. Amet assumenda consequatur culpa delectus
            deserunt dignissimos ducimus eaque eveniet, exercitationem hic ipsum laboriosam laborum maxime molestias
            odit officia quam rerum velit veniam?
        </div>
        <div>Ab accusantium ad aliquid amet, aspernatur atque beatae commodi cumque cupiditate deserunt, dolores est ex
            inventore ipsam iste mollitia nemo neque quam quas qui sapiente sed, suscipit tempore tenetur voluptatum!
        </div>
        <div>A aut delectus nobis placeat sed! Aliquam dolorum id magnam maiores, quo saepe sit? Ad adipisci, asperiores
            consequatur esse harum impedit incidunt nihil nobis, nulla quod ratione saepe temporibus velit.
        </div>
        <div>Accusamus blanditiis consectetur eligendi enim laborum magnam, numquam odio pariatur quam quia vel,
            veritatis, voluptate! Assumenda aut beatae debitis eligendi error itaque minima necessitatibus, non omnis
            quo quos repudiandae sed.
        </div>
        <div>Atque commodi, consequuntur delectus dicta ex exercitationem illo illum, ipsam iste itaque laboriosam minus
            obcaecati odio placeat quae quaerat reiciendis sit velit vero voluptate? Accusamus omnis perspiciatis
            quaerat repudiandae tempore!
        </div>
        <div>Alias aliquid atque dignissimos doloremque eius enim eos eum eveniet itaque laboriosam maiores natus nemo
            nihil quas quasi recusandae reprehenderit, rerum vel! Accusantium dolorem eligendi maiores mollitia quod
            quos saepe!
        </div>
        <div>Cumque dolor eveniet excepturi expedita harum iure iusto labore libero qui quis recusandae rerum, sit vitae
            voluptate voluptatibus! Adipisci cum dolore esse ipsa maiores molestias nisi nostrum reprehenderit
            repudiandae tempora?
        </div>
        <div>Ad autem blanditiis eos et fuga fugit nesciunt nostrum reiciendis. A amet aspernatur aut dolore, dolores ex
            expedita fugit, id molestias mollitia odit quasi rerum sapiente sed sequi sunt, temporibus.
        </div>
        <div>Alias assumenda consequatur deleniti itaque libero sequi sit. Amet est nesciunt reiciendis suscipit
            temporibus. Architecto aspernatur aut cum cupiditate eos et ex incidunt maiores numquam quaerat quibusdam,
            ratione reiciendis sequi.
        </div>
    </div>
    <script>
        window.addEventListener('resize',function () {
            console.log('杨硕打人了(窗口大小被改动了)！');
        })
        window.addEventListener('scroll',function () {
            console.log('杨硕打人了！（窗口被滚动了）');
        })
        /* 给按钮2添加点击事件 click function(){}是监听到点击事件后的处理函数 */
        let btnE=document.getElementById('btn');
        btnE.addEventListener('click',function () {
            console.log('被杨硕咬了!');
        })
        let spanE=document.querySelector('span');
        spanE.addEventListener('mouseover',function () {
            console.log('被徐志杰退票了');
        })
    </script>
</body>
</html>